<!--  -->
<template>
  <div class="login">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          placeholder="密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >登录</el-button
        >
        <el-button @click="resetForm('ruleForm')">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { register } from "@/api";
import { mapActions } from "vuex";
import { Message } from "element-ui";
export default {
  // 组件状态值
  data() {
    return {
      ruleForm: {},
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  // 计算属性
  computed: {},
  // 组件方法
  methods: {
    ...mapActions(["login"]),
    //登录
    submitForm() {
      this.login(this.ruleForm);
      // this.$refs[formName].validate((valid) => {
      // if (valid) {
      // login(this.ruleForm).then((res) => {
      //   console.log(res);
      //   if (res.data.code === 0) {
      //     localStorage.set("token", res.data.token);
      //     this.$router.push("/");
      //     this.$message.success(res.data.msg);
      //   } else {
      //     this.$message.error(res.data.msg);
      //   }
      // });
      // } else {
      //   console.log("error submit!!");
      //   return false;
      // }
      // });
    },
    //注册
    resetForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          register(this.ruleForm).then((res) => {
            if (res.data.code === 3) {
              Message(
                {
                  message: res.data.msg,
                  type: "error",
                },
                true
              );
            } else {
              Message(
                {
                  message: res.data.msg,
                  type: "success",
                },
                true
              );
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: url("../../assets/background.jpeg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed;
  left: 0;
  top: 0;
}
.el-form {
  width: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
}
</style>
